<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1 {
            height: 100px;
            width: 300px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div id="div1">
    把鼠标移动到上面
</div>
<div style="margin-top:20px">
    <img src="img/1.jpg" id="jpg">
</div>
<div style="margin-top: 20px ;border: 1px solid black">
    <h3 id="h3">什么是受益人</h3>
    <p id="content"></p>
</div>
<div style="margin-top:20px ">
    <input type="checkbox" id="selectAll">全选/全不选
    <input type="checkbox" name="check">剑圣
    <input type="checkbox" name="check">vn
    <input type="checkbox" name="check">泰坦
</div>
<div style="margin-top:20px ">
    <h1 class="name" name="Name">张三</h1>
    <h1 class="name" name="Name">李四</h1>
    <h1 class="name" name="Name">王五</h1>
    <h1 class="name" name="Name">赵六</h1>
</div>
<div style="margin-top:20px ">
    <img src="img/bulb_off.png" id="light">
</div>
<script type="text/javascript">
    var div = document.getElementById("div1");
    div.onmouseover = function () {
        div.innerHTML = "谢谢"
    }
    div.onmouseout = function () {
        div.innerHTML = "把鼠标移动到上面";
    }
    var jpg = document.getElementById("jpg")
    jpg.onclick = function () {
        jpg.style = "border:1px solid red"
    }
    var h3 = document.getElementById("h3")
    h3.onclick = function () {
        h3.style = "background-color: aquamarine"
        document.getElementById("content").innerHTML = "解答︰受益人是指人身保险中由被保险人或者投保人指定的享有保险金请求权的人，投保人、被保险人可以为受益人。"
    }
    var check = document.getElementsByName("check")//返回的是一个数组
    var All = document.getElementById("selectAll")
    for (var a = 0; a < check.length; a++) {
        check[a].onclick = function () {
            if (check[0].checked == true && check[1].checked == true && check[2].checked == true) {
                All.checked = true;
            } else {
                All.checked = false;
            }
        }
    }
    All.onclick=function () {
        for (var a = 0; a < check.length; a++) {
            //通过obj.checked获取全选框中的状态
            check[a].checked=this.checked;//这里不能写true或false  写了的话就直接写死了  需要用该对象的checked属性获取这个状态
        }
    };
    var c = document.getElementsByName("Name")
    for (var a = 0; a < c.length; a++) {
        c[a].onclick = function () {
            this.style = "color:red"
        }
    }
    var a = document.getElementById("light");
    var c = false;
    var b = "on"
    a.onclick = function () {
        if (b == "on") {
            b = "off"
        } else {
            b = "on"
        }
        console.log(b)
        a.src = "img/bulb_" + b + ".png"
    }
    a.onmouseover = function () {
        a.src = "img/bulb_on.png"
    }
    a.onmouseout = function () {
        a.src = "img/bulb_off.png"
    }
</script>
</body>
</html>